<!-- 首页 -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta
			name="viewport"
			content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"
		/>
		<meta
			name="keywords"
			content="永琪，永琪官网，永琪美容美发上海永琪美容美发经营管理有限公司"
		/>
		<title>上海永琪美容美发经营管理有限公司-永琪官网</title>
		<link rel="shortcut icon" href="./static/images/favicon.ico" />
		<!-- 引入动画依赖 -->
		<link rel="stylesheet" href="./static/animate.min.css" />
		<!-- 引入swiper依赖 -->
		<link rel="stylesheet" href="./static/swiper-bundle.min.css" />
		<!-- pc端 -->
		<link rel="stylesheet" type="text/css" href="./css/common.css" />
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
		<script src="./js/adapter.js"></script>
		<script src="./static/jquery.js"></script>
		<script>
			$(function () {
				// do something
				// 是否为手机端
				let screenWidth = window.matchMedia("(max-width: 767px)").matches;
				if (screenWidth) {
					window.location.href = "./m-index.html";
				}
				setTimeout(() => {
          $('#loading').hide();
        }, 200);
			});
		</script>
	</head>
	<body>
		<div id="loading">
      <img src="./static/images/loading.gif" alt="">
    </div>
		<header>
			<div class="logo-warp">
				<picture alt="">
					<source
						srcset="https://res.dianmeicn.cn/images/yongqi/m-logo.png"
						media="(max-width: 767px)"
					/>
					<source
						srcset="https://res.dianmeicn.cn/images/yongqi/logo.png?123"
						media="(min-width: 768px)"
					/>
					<img
						src="https://res.dianmeicn.cn/images/yongqi/m-logo.png"
						alt=""
						class="logo"
					/>
				</picture>
				<img
					src="https://res.dianmeicn.cn/images/yongqi/m-menu-btn.png"
					alt=""
					class="menu-btn hide on"
					@click=""
				/>
				<img
					src="https://res.dianmeicn.cn/images/yongqi/m-menu-open.png"
					alt=""
					class="menu-open hide"
				/>
			</div>
			<div class="nav">
				<ul>
					<li class="index active"><a>首页</a></li>
					<li class="desc">
						<a> 企业简介 </a>
						<div class="mask">
							<a href="./desc.html">企业概况</a>
							<a href="./desc.html#slide5">企业文化</a>
							<a href="desc.html#slide6">八大支撑</a>
						</div>
					</li>
					<li class="salon"><a>美容美发</a></li>
					<!-- <li class="education"><a>教育培训</a></li> -->
					<!-- <li class="informationize"><a>数字化系统</a></li> -->
					<li class="about"><a>联系我们</a></li>
				</ul>
			</div>
		</header>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<picture alt="">
						<source
							srcset="https://res.dianmeicn.cn/images/yongqi/m-banner1.png"
							media="(max-width: 767px)"
						/>
						<source
							srcset="https://res.dianmeicn.cn/images/yongqi/banner1.jpg"
							media="(min-width: 768px)"
						/>
						<img
							src="https://res.dianmeicn.cn/images/yongqi/m-banner1.png"
							alt=""
							class="banner-img"
						/>
					</picture>
					<div class="banner-info opc banner1">
						<div class="animated delay0">LARGE BEAUTY</div>
						<div class="animated delay1">CHAINS</div>
						<div class="animated delay2">美容美发连锁品牌</div>
					</div>
				</div>
				<div class="swiper-slide">
					<!-- <div class="video is-pc">
						<img
							src="https://res.dianmeicn.cn/images/yongqi/video-play.png"
							class="video-play"
							alt=""
						/>
						<video
							src="https://res.dianmeicn.cn/images/yongqi/01.mp4"
							controlslist="nodownload"
							poster="https://res.dianmeicn.cn/images/yongqi/video.jpeg"
							disablePictureInPicture="true"
							id="video"
						></video>
					</div> -->
					<picture alt="">
						<source
							srcset="https://res.dianmeicn.cn/images/yongqi/m-banner2.png"
							media="(max-width: 767px)"
						/>
						<source
							srcset="https://res.dianmeicn.cn/images/yongqi/banner2.png"
							media="(min-width: 768px)"
						/>
						<img
							src="https://res.dianmeicn.cn/images/yongqi/m-banner2.png"
							alt=""
							class="banner-img"
						/>
					</picture>
					<div class="banner-info opc banner2">
						<div class="animated delay0">YONGQI PUBLIC</div>
						<div class="animated delay1 is-pc">SERVICE OF HAIRCUT</div>
						<div class="animated delay2 is-pc">
							齐心协力｜共同抗疫｜携手美业｜众志成城
						</div>
					</div>
				</div>
				<div class="swiper-slide">
					<picture alt="">
						<source
							srcset="https://res.dianmeicn.cn/images/yongqi/m-banner3.png"
							media="(max-width: 767px)"
						/>
						<source
							srcset="https://res.dianmeicn.cn/images/yongqi/banner3.png"
							media="(min-width: 768px)"
						/>
						<img
							src="https://res.dianmeicn.cn/images/yongqi/m-banner3.png"
							alt=""
							class="banner-img"
						/>
					</picture>
					<div class="banner-info opc banner3">
						<div class="animated delay0">CREATE THE</div>
						<div class="animated delay1">BEAUTY OF LIFE</div>
						<div class="animated delay2">创造美 让生活更美好</div>
					</div>
				</div>
			</div>
			<!-- 如果需要分页器 -->
			<div class="swiper-pagination"></div>

			<!-- 如果需要导航按钮 -->
			<div class="swiper-btn prev">
				<img
					src="https://res.dianmeicn.cn/images/yongqi/left-arrow.png"
					class="arrow"
					alt=""
				/>
				<img
					src="https://res.dianmeicn.cn/images/yongqi/left-arrow-active.png"
					class="arrow-active"
					alt=""
				/>
			</div>
			<div class="swiper-btn next">
				<img
					src="https://res.dianmeicn.cn/images/yongqi/right-arrow.png"
					class="arrow"
					alt=""
				/>
				<img
					src="https://res.dianmeicn.cn/images/yongqi/right-arrow-active.png"
					class="arrow-active"
					alt=""
				/>
			</div>
		</div>

		<footer>
			<span
				>Copyright © 2021 YONGQI All Rights Reserved
				<a
					href="http://beian.miit.gov.cn"
					target="_blank"
					style="color: #ffffff"
					>沪ICP备05017183号</a
				></span
			>
		</footer>

		<script src="./static/swiper-bundle.min.js"></script>
		<script src="./js/location.js"></script>
		<script src="./js/common.js"></script>
	</body>

	<script>
		var mySwiper = new Swiper(".swiper-container", {
			// direction: "vertical", // 垂直切换选项
			loop: true, // 循环模式选项
			autoplay: {
				delay: 3000,
				disableOnInteraction: false,
			},
			on: {
				init: function (swiper) {
					let index = (swiper.activeIndex - 1 + 3) % 3;
					if (index == 0 || index == 1 || index == 2) {
						window.animate(true, index);
					} else {
						window.animate(false, index);
					}
				},
				slideChangeTransitionEnd(swiper) {
					let index = (swiper.activeIndex - 1 + 3) % 3;
					if (index == 0 || index == 1 || index == 2) {
						window.animate(true, index);
						// index 不为1 需要关闭视频
						// $(".is-pc #video").get(0).pause();
						// $(".video-play").css({ display: "block" });
					} else {
						window.animate(false, index);
					}
				},
			},
			// 如果需要分页器
			pagination: {
				el: ".swiper-pagination",
			},

			// 如果需要前进后退按钮
			navigation: {
				nextEl: ".next",
				prevEl: ".prev",
			},
		});
		// $(".is-pc .video-play").click(function () {
		// 	$(".is-pc #video").get(0).play();
		// 	$(".is-pc .video-play").css({ display: "none" });
		// });

		// $(".is-pc #video").click(function toggleSound() {
		// 	if ($(".is-pc #video").get(0).paused) {
		// 		$(".is-pc #video").get(0).play();
		// 		$(".is-pc .video-play").css({ display: "none" });
		// 	} else {
		// 		$(".is-pc #video").get(0).pause();
		// 		$(".is-pc .video-play").css({ display: "block" });
		// 	}
		// });

		// 处理文本动画
		function animate(isload = true, index) {
			let divList = [...$(".swiper-slide div")];
			if (isload) {
				if (index == 0) {
					$(`.banner1`).addClass("opc");
				} else {
					$(`.banner1`).removeClass("opc");
					$(".delay0").removeClass(`fadeInUp`);
					$(".delay1").removeClass(`fadeInUp`);
					$(".delay2").removeClass(`fadeInUp`);
				}

				if (index == 1) {
					$(`.banner2`).addClass("opc");
				} else {
					$(`.banner2`).removeClass("opc");
					$(".delay0").removeClass(`fadeInUp`);
					$(".delay1").removeClass(`fadeInUp`);
					$(".delay2").removeClass(`fadeInUp`);
				}

				if (index == 2) {
					$(`.banner3`).addClass("opc");
				} else {
					$(`.banner3`).removeClass("opc");
					$(".delay0").removeClass(`fadeInUp`);
					$(".delay1").removeClass(`fadeInUp`);
					$(".delay2").removeClass(`fadeInUp`);
				}

				$(`.banner${index + 1} .delay0`).addClass(`fadeInUp`);
				$(`.banner${index + 1} .delay1`).addClass(`fadeInUp`);
				$(`.banner${index + 1} .delay2`).addClass(`fadeInUp`);
			} else {
				$(".delay0").removeClass(`fadeInUp`);
				$(".delay1").removeClass(`fadeInUp`);
				$(".delay2").removeClass(`fadeInUp`);
			}
		}
	</script>
</html>
